// 这是轮播图组件

require('styles/lunbo.scss');

import React from 'react';

function LB(props){
  const list = props.list
  const currentIndex = props.currentIndex
  const listItems = list.map((item,index) => {
    if(index === currentIndex) {
      return <li key={index} className='show'>
      <a href='#'>
        <img src={item}/>
      </a>
    </li>
    } else {
      return <li key={index}>
        <a href='#'>
          <img src={item}/>
        </a>
      </li>
    }
  })
  const dianItems = list.map((i,index) => {
    if(index === currentIndex) {
      return <li key={index} style={{background: 'red'}}></li>
    } else{
      return <li key={index} onClick={props.onClick} data-index={index}></li>
    }
  })
  return (
    <div>
      <ul className="lb">
        {listItems}
      </ul>
      <div className="dian">
        {dianItems}
      </div>
    </div>
  )
}



class LunBo extends React.Component{
  constructor(props){
    super(props)
    this.state={
      imgList:['../images/1.png','../images/2.png','../images/3.png','../images/4.png','../images/5.png'],
      bgColor:['#fff', '#28241c','red','#0b336e','red'],
      currentIndex: 0
    }
    this.previous = this.previous.bind(this)
    this.next = this.next.bind(this)
    this.dianClick = this.dianClick.bind(this)
    this.mouseLeave = this.mouseLeave.bind(this)
    this.mouseEnter = this.mouseEnter.bind(this)
  }

  componentDidMount() {
    this.timer = setInterval(
      () => this.tick(), 2000
    )
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  tick() {
    if(this.state.currentIndex+1 >= this.state.imgList.length){
       this.setState({
        currentIndex: 0
      })
    } else{
      this.setState({
        currentIndex: this.state.currentIndex+1
      })
    }
  }

  previous() { // 点击上一张
    if(this.state.currentIndex-1 < 0){
       this.setState({
        currentIndex:  this.state.imgList.length -1
      })
    } else{
      this.setState({
          currentIndex: this.state.currentIndex-1
      })
    }
  }

  next() { // 点击下一张
    this.tick()
  }

  dianClick(e) { // 导航点的点击事件
    this.setState({
      currentIndex: parseInt(e.target.dataset.index)
    })
  }

  mouseLeave() { //离开盒子开启定时器
    this.timer = setInterval(
      () => this.tick(), 2000
    )
  }

  mouseEnter() { // 进入盒子清除定时器
     clearInterval(this.timer)
  }

  render() {
    return (
      <div className="swarp aa" style={{background: this.state.bgColor[this.state.currentIndex]}}  onMouseLeave={this.mouseLeave} onMouseEnter={this.mouseEnter}>
        <div className="ban">
            <div className="left">
              <LB list={this.state.imgList}  currentIndex={this.state.currentIndex} onClick={this.dianClick}></LB>
            </div>
            <div className="goToLeft" onClick={this.previous}></div>
            <div className="goToRight" onClick={this.next}></div>
            <div className="right">
              <a href="#"></a>
              <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
            </div>
        </div>
      </div>
    )
  }
}

export default LunBo;